<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="never" class="card">
					<div id="charts_one" style="width:100%;min-height:80vh">
						<Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm="searchForm" @refresh_list="index"></Search>
						<div class="btn-group" style="margin-bottom:11px;">
                           <div>
							   <el-button type="success"  size="mini" icon="el-icon-plus"  @click="add(ids)" v-if="checkPermission('/app/WorkSetting/add.html')" >{{$t('action.add')}}</el-button>   
<!--                               <el-button type="primary" :disabled="single" size="mini" icon="el-icon-edit"  @click="update(ids)" v-if="checkPermission('/app/WorkSetting/update.html')" >{{$t('action.update')}}</el-button>  -->
							   <el-button type="danger" :disabled="multiple" size="mini" icon="el-icon-delete"  @click="del(ids)" v-if="checkPermission('/app/WorkSetting/delete.html')" >{{$t('action.delete')}}</el-button>     
                               <el-button type="info" :disabled="single" size="mini" icon="el-icon-view"  @click="detail(ids)" v-if="checkPermission('/app/WorkSetting/detail.html')" >{{$t('action.detail')}}</el-button>
                               <el-button type="primary" :disabled="multiple" size="mini" icon="el-icon-view"  @click="audit(ids)"  >审核</el-button>
                               <el-button type="primary" :disabled="single" size="mini" icon="el-icon-view"  @click="unaudit(ids)"  >反审核</el-button>
                               <el-button type="primary" :disabled="single" size="mini" icon="el-icon-view"  @click="start(ids)"  >启用</el-button>
                           </div>
                           <table-tool :searchVisible.sync="searchVisible"  :fieldList="fieldList" @refresh_list="index" :searchTool="true"></table-tool>
						</div>
					    <el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">		   
						    <el-table-column align="center" type="selection" width="42"></el-table-column>
                <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
<!--							<el-table-column align="center" type='' v-if="fieldList[0].checked" property="id" label="ID" show-overflow-tooltip width="70">-->
<!--							</el-table-column>-->
<!--							<el-table-column align="center"  v-if="fieldList[1].checked" property="fnumber" :label="$t('field.WorkSetting_fnumber')" show-overflow-tooltip width="" >-->
<!--							</el-table-column>-->
							<el-table-column align="center"  v-if="fieldList[2].checked" property="fbillno" :label="$t('field.WorkSetting_fbillno')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[3].checked" property="fname" :label="$t('field.WorkSetting_fname')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[4].checked" property="fcustomer" :label="$t('field.WorkSetting_fcustomer')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[5].checked" property="fheader" :label="$t('field.WorkSetting_fheader')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[6].checked" property="fcreateuser" :label="$t('field.WorkSetting_fcreateuser')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[7].checked" property="fcreatedate" :label="$t('field.WorkSetting_fcreatedate')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[8].checked" property="fupdateuser" :label="$t('field.WorkSetting_fupdateuser')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[9].checked" property="fupdatedate" :label="$t('field.WorkSetting_fupdatedate')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[10].checked" property="faudituser" :label="$t('field.WorkSetting_faudituser')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[11].checked" property="fauditdate" :label="$t('field.WorkSetting_fauditdate')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[12].checked" property="fendate" :label="$t('field.WorkSetting_fendate')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[13].checked" property="fnote" :label="$t('field.WorkSetting_fnote')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[14].checked" property="fstatus" :label="$t('field.WorkSetting_fstatus')" show-overflow-tooltip width="" >
                <template slot-scope="scope">
                  <el-tag :type="scope.row.fstatus === 1? '': (scope.row.fstatus === 1? 'success': 'danger')">{{ scope.row.fstatus === 1? '已审核':'未审核' }}</el-tag>
                </template>
              </el-table-column>
							<el-table-column align="center"  v-if="fieldList[15].checked" property="fstartdate" :label="$t('field.WorkSetting_fstartdate')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[16].checked" property="ftype" :label="$t('field.WorkSetting_ftype')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[17].checked" property="fisvs" :label="$t('field.WorkSetting_fisvs')" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[18].checked" property="fistest" :label="$t('field.WorkSetting_fistest')" show-overflow-tooltip width="" >
							</el-table-column>
                <el-table-column align="center"  v-if="fieldList[19].checked" property="fvs" :label="$t('field.WorkSetting_fvs')" show-overflow-tooltip width="" >
                </el-table-column>
                <el-table-column align="center"  v-if="fieldList[20].checked" property="fvcom" :label="$t('field.WorkSetting_fvcom')" show-overflow-tooltip width="" >
                </el-table-column>
							  <el-table-column :fixed="$store.getters.device !== 'mobile'?'right':false" :label="$t('system.operation')" align="center" width="160">
								<template slot-scope="scope">
									<div v-if="scope.row.id">
										<el-button size="mini" type="primary" @click="update(scope.row)"  v-if="checkPermission('/app/WorkSetting/update.html')"><i class="el-icon-edit" />{{$t('action.update')}}</el-button>
										<el-button size="mini" type="danger" @click="del(scope.row)"  v-if="checkPermission('/app/WorkSetting/delete.html') && scope.row"><i class="el-icon-delete" />{{$t('action.delete')}}</el-button>
									</div>
								</template>
							  </el-table-column>
						</el-table>
						<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
					</div>
				</el-card>
			</el-col>
		</el-row>
	    <!--添加-->
		<Add  :show.sync="dialog.addDialogStatus" size="small" @refresh_list="index"></Add>
		<!--修改-->
		<Update :info="updateInfo" :show.sync="dialog.updateDialogStatus" size="small" @refresh_list="index"></Update>
		<!--查看详情-->
		<Detail :info="detailInfo" :show.sync="dialog.detailDialogStatus" size="small" @refresh_list="index"></Detail>
	</div>
</template>
<script>
	import {
    index,
    updateExt,
    getUpdateInfo,
    del,
    start,
    audit,
    unaudit,
  } from '@/api/app/worksetting'
	import Search from '@/components/common/Search.vue'
	import Page from '@/components/common/Page.vue'
	import TableTool from '@/components/common/TableTool.vue'
	import { confirm,param2Obj } from '@/utils/common'
	import Add from '@/views/app/worksetting/add.vue' 
	import Update from '@/views/app/worksetting/update.vue' 
	import Detail from '@/views/app/worksetting/detail.vue'
	export default {
		name:'workSetting',
		components: {
			Search,
			Page,
			TableTool,
	        Add,  
	        Update,  
	        Detail,  
		},
		data(){
			return {
				dialog: {
	                    addDialogStatus : false,           
	                    updateDialogStatus : false,           
	                    detailDialogStatus : false,           
				},
				fieldList:[
					{lable:'ID',checked:true},
				    {lable:this.$t('field.WorkSetting_fnumber'),checked:true},
				    {lable:this.$t('field.WorkSetting_fbillno'),checked:true},
				    {lable:this.$t('field.WorkSetting_fname'),checked:true},
				    {lable:this.$t('field.WorkSetting_fcustomer'),checked:true},
				    {lable:this.$t('field.WorkSetting_fheader'),checked:true},
				    {lable:this.$t('field.WorkSetting_fcreateuser'),checked:true},
				    {lable:this.$t('field.WorkSetting_fcreatedate'),checked:true},
				    {lable:this.$t('field.WorkSetting_fupdateuser'),checked:true},
				    {lable:this.$t('field.WorkSetting_fupdatedate'),checked:true},
				    {lable:this.$t('field.WorkSetting_faudituser'),checked:true},
				    {lable:this.$t('field.WorkSetting_fauditdate'),checked:true},
				    {lable:this.$t('field.WorkSetting_fendate'),checked:true},
				    {lable:this.$t('field.WorkSetting_fnote'),checked:true},
				    {lable:this.$t('field.WorkSetting_fstatus'),checked:true},
				    {lable:this.$t('field.WorkSetting_fstartdate'),checked:true},
				    {lable:this.$t('field.WorkSetting_ftype'),checked:true},
				    {lable:this.$t('field.WorkSetting_fisvs'),checked:true},
				    {lable:this.$t('field.WorkSetting_fistest'),checked:true},
				    {lable:this.$t('field.WorkSetting_fvs'),checked:true},
				    {lable:this.$t('field.WorkSetting_fvcom'),checked:true},
				    {lable:this.$t('field.WorkSetting_flabxz'),checked:true},
				    {lable:this.$t('field.WorkSetting_ftupian'),checked:true},
				    {lable:this.$t('field.WorkSetting_ftpname'),checked:true},
				    {lable:this.$t('field.WorkSetting_fbxtype'),checked:true},
				    {lable:this.$t('field.WorkSetting_flabcontent'),checked:true},
				],
				ids: [],
				selectRows:[],
				selectTotal:0,
				single:true,
				multiple:true,
				list: [],
				small_tables:{},
	            addInfo:{},
	            updateInfo:{},
	            detailInfo:{},
				loading: false,
				page_data: {
					limit: 20,
					page: 1,
					total:20,
				},
				searchVisible:true,
				searchForm:[],
				searchData:{},
			}
		},
		methods: {
      index() {
        let param = {limit: this.page_data.limit, page: this.page_data.page}
        Object.assign(param, this.searchData, param2Obj(this.$route.fullPath))
        this.loading = true
        index(param).then(res => {
          this.list = res.data.data
          this.small_tables = res.sql_field_data
          this.page_data.total = res.data.total
          this.loading = false
          if (this.page_data.page == 1) {
            this.searchForm = [
              {type: 'Input', label: this.$t('field.WorkSetting_fnumber'), prop: 'fnumber', width: '150px'},
              {type: 'Input', label: this.$t('field.WorkSetting_fbillno'), prop: 'fbillno', width: '150px'},
              {type: 'Input', label: this.$t('field.WorkSetting_fname'), prop: 'fname', width: '150px'},
              {type: 'Input', label: this.$t('field.WorkSetting_fcustomer'), prop: 'fcustomer', width: '150px'},
              {type: 'Input', label: this.$t('field.WorkSetting_fheader'), prop: 'fheader', width: '150px'},
              {type: 'Input', label: this.$t('field.WorkSetting_fcreateuser'), prop: 'fcreateuser', width: '150px'},
              {type: 'datetime', label: this.$t('field.WorkSetting_fcreatedate'), prop: 'fcreatedate', width: '150px'},
            ]
          }
        })
      },
      updateExt(row, field) {
        if (row.id) {
          updateExt({id: row.id, [field]: row[field]}).then(res => {
            this.$message({message: this.$t('system.success'), type: 'success'})
          })
        }
      },
      add() {
        this.dialog.addDialogStatus = true
      },
      start(row) {
        let id = row.id ? row.id : this.ids.join(',')
        start({id: id}).then(res => {
          this.index()
          console.log(res)
          this.$message({message: "启用成功", type: 'success'})
        })
      },
      update(row) {
        let id = row.id ? row.id : this.ids.join(',')
        getUpdateInfo({id: id}).then(res => {
          if (row.fstatus === 0) {
            if (res.status == 200) {
              this.dialog.updateDialogStatus = true
              this.updateInfo = res.data
            }
          }
          else{
            this.$message.warning('已审核无法修改')
          }
        })
      },
			del(row){
				confirm({content:this.$t('system.confirmOperation')}).then(() => {
					let ids = row.id ? row.id : this.ids.join(',')
					del({id:ids}).then(res => {
						this.$message({message: this.$t(res.msg), type: 'success'})
						this.index()
					})
				}).catch(() => {})
			},
			detail(row){
				this.dialog.detailDialogStatus = true
				this.detailInfo = {id:row.id ? row.id : this.ids.join(',')}
			},
      audit(row){
        let id = row.id ? row.id : this.ids.join(',')
        audit({id : id}).then(res => {
          this.index()
            if (res.data) {
              this.$message.success('审核成功')
              this.$message.warning('审核失败')
            }
          })
      },
      unaudit(row){
        let id = row.id ? row.id : this.ids.join(',')
        unaudit({id : id}).then(res =>{
          this.index()
          if (res.data){
            this.$message.success('审核成功')
            this.$message.warning('审核失败')
          }
        })
      },
			selection(selection) {
			    this.selectRows=selection
			    this.selectTotal=selection.length
				this.ids = selection.map(item => item.id)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			handleRowClick(row, rowIndex,event){
				if(event.target.className !== 'el-input__inner'){
					this.$refs.multipleTable.toggleRowSelection(row)
				}
			},
			rowClass ({ row, rowIndex }) {
				for(let i=0;i<this.ids.length;i++) {
					if (row.id === this.ids[i]) {
						return 'rowLight'
					}
				}
			},
		},	
		mounted(){
			this.index()
		}
	}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
</style>